<!-- editorMarkDown 组件 -->
<template>
    <!-- 
        :disabled-menus="[]"把禁用的title放在此数组中
        :include-level="[1,2,3,4,5,6]" 点击目录导航的层级
        @upload-image="handleUploadImage"图片上传
        @change="change"双向绑定效果
     -->
    <VueMarkdownEditor 
    v-model="(modelValue)"
    placeholder="请使用markdown语法..."
    left-toolbar="undo redo clear | tip emoji code | h bold italic strikethrough quote | ul ol table hr | link image  | save | customToolbar"
    :height="height+'px'"
    :disabled-menus="[]"
    :include-level="[1,2,3,4,5,6]"
    @upload-image="handleUploadImage"
    @change="change"></VueMarkdownEditor>
</template>

<script setup>
import VueMarkdownEditor from "@kangc/v-md-editor";
import "@kangc/v-md-editor/lib/style/base-editor.css";

import vuepressTheme from "@kangc/v-md-editor/lib/theme/vuepress.js";
import "@kangc/v-md-editor/lib/theme/style/vuepress.css";
import Prism from "prismjs";
import createEmojiPlugin from '@kangc/v-md-editor/lib/plugins/emoji/index';
import '@kangc/v-md-editor/lib/plugins/emoji/emoji.css';
import createAlignPlugin from '@kangc/v-md-editor/lib/plugins/align';

VueMarkdownEditor.use(vuepressTheme, {
  Prism,
});

VueMarkdownEditor.use(createEmojiPlugin());
VueMarkdownEditor.use(createAlignPlugin());

const props = defineProps({
    modelValue: {
        type: String,
        default: "",
    },

    height: {
        type: Number,
        default: 500,
    },
});

// ========================= 图片自定义上传 =========================
function handleUploadImage(event, insertImage, files) {
    console.log(files);
    // 图片自定义上传
    
    // 地址回显
    insertImage({
        url: '',
        desc: '博客图片'
    })
};

// ========================= 向父组件传递的方法 =========================
const emit = defineEmits();
function change(markdownContent,htmlContent) {
    emit('update:modelValue', markdownContent);
    emit('htmlContent', htmlContent);
};
</script>

<style lang="scss" scoped>

</style>
